<template>
  <!-- 流量概况 -->
  <div class="flow-home">
    <!-- 统计时间 -->
    <flow-survey-header @on-date-value-change="onDateValueChange" />
    <!-- 流量总览 -->
    <flow-survey-overview
      ref="flowSurveyOverviewRef"
      :time-type="timeType"
      :start-time="startTime"
      @on-system-type-change="onSystemTypeChange"
    />
    <!-- 流量趋势 -->
    <flow-survey-trend
      ref="flowSurveyTrendRef"
      :start-time="startTime"
      :time-type="timeType"
      @on-system-type-chage="onSystemTypeChage"
    />
    <!-- 流量来源构成 -->
    <flow-survey-source
      ref="flowSurveySourceRef"
      :start-time="startTime"
      :time-type="timeType"
    />
  </div>
</template>

<script setup>
import FlowSurveyHeader from './components/flow-survey-header.vue'
import FlowSurveyOverview from './components/flow-survey-overview.vue'
import FlowSurveyTrend from './components/flow-survey-trend.vue'
import FlowSurveySource from './components/flow-survey-source.vue'

const flowSurveyOverviewRef = ref(null)
const flowSurveyTrendRef = ref(null)
const flowSurveySourceRef = ref(null)

const timeType = ref(6)
const startTime = ref('')
const onDateValueChange = (obj) => {
  timeType.value = obj.timeType
  startTime.value = obj.startTime
}

const systemType = ref(0)
const onSystemTypeChange = (systemTypes) => {
  systemType.value = systemTypes
}

const onSystemTypeChage = (systemTypes) => {
  systemType.value = systemTypes
}

watch(() => systemType.value,
  val => {
    flowSurveyTrendRef.value.systemType = val
    flowSurveyOverviewRef.value.systemType = val
  }
)

</script>
